<template>
  <div>
    <Header>
      <el-button size="small" type="primary" @click="addClass('')"
        >新建一级分类</el-button
      >
      <div class="heads-right">
        只显示一级分类 &nbsp;&nbsp;
        <el-switch
          v-model="isshowtwo"
          active-color="#13ce66"
          inactive-color="#909399"
          @change="switchChang"
        >
        </el-switch>
      </div>
    </Header>
    <Main :type="'ordinary'" :footer-lock="false">
      <el-tree
        ref="tree"
        style="background:#f2f2f6;"
        :data="ListData"
        node-key="id"
        :default-expand-all="true"
        :expand-on-click-node="false"
        :props="defaultProps"
        :render-content="renderContent"
        @node-click="filters"
      >
      </el-tree>
    </Main>

    <el-dialog
      :title="dialogFormTitle"
      :visible.sync="dialogFormVisible"
      width="30%"
    >
      <el-form v-model="addForm">
        <el-form-item label="分类名称" label-width="80px">
          <el-input
            v-model="addForm.dataItemName"
            style="line-height: 20px;"
            :maxlength="maxlength"
            show-word-limit
            size="medium"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品图片" label-width="80px">
          <div class="commodityImage clearfix">
            <div class="icon">
              <img
                v-if="addForm.commodityImage"
                :src="
                  $store.state.qiniu +
                    addForm.commodityImage +
                    $store.state.imgRotate
                "
                alt=""
              />
            </div>
            <el-button type="primary" @click="showImages = true"
              >选择图片</el-button
            >
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save" @keyup.enter.native="save"
          >保 存</el-button
        >
      </div>
    </el-dialog>

    <images
      :dialog-images="showImages"
      :use-btn="true"
      :use-type="'img'"
      @close="close"
    />
  </div>
</template>
<script>
import {
  SETSHOPGOODSTYPE,
  GETLISTShopClass,
  DELETE,
  ONLYSHOWONE,
  SHOWAPPONE
} from "../service";

export default {
  components: {
    images: r =>
      require.ensure([], () => r(require("publicCom/imgupdate")), "imgupdate")
  },
  data() {
    return {
      showImages: false,
      Url: this.$store.state.qiniu,
      ListData: [],
      dialogFormTitle: "新增分类",
      dialogFormVisible: false,
      addForm: this.defaultAddFromData(),
      parent_id: 0,
      type_id: "",
      defaultProps: {
        children: "second",
        label: "type_name"
      },
      application: this.$store.state.group_name,
      config_id: "",
      maxlength: 5,
      isshowtwo: false
    };
  },
  created() {
    if (this.$route.query.msg === "set") {
      this.addClass("");
    }
    this.getList();
    this.switchShow();
  },
  methods: {
    defaultAddFromData() {
      return {
        commodityImage: "",
        dataItemName: ""
      };
    },
    close(file) {
      this.showImages = false;
      if (!file) return;
      this.addForm.commodityImage = file.file_path;
    },
    addClass(parentId) {
      this.dialogFormTitle = !parentId ? "新建一级分类" : "新建二级分类";
      this.maxlength = !parentId ? 5 : 10;
      this.parent_id = typeof parentId !== "object" ? parentId : 0;
      this.type_id = "";
      this.addForm = this.defaultAddFromData();
      this.dialogFormVisible = true;
    },
    setClass(data, num) {
      this.dialogFormTitle = num === 1 ? "修改一级分类" : "修改二级分类";
      this.maxlength = num === 1 ? 5 : 10;
      this.dialogFormVisible = true;
      this.parent_id = data.parent_id;
      this.type_id = data.type_id;
      this.config_id = data.config_id;
      this.addForm = {
        commodityImage: data.type_cover,
        dataItemName: data.type_name
      };
    },
    async switchChang(isshowtwo) {
      let title = isshowtwo
        ? "开启后，商品分类页面只展示一级分类内容，是否确认开启?"
        : "关闭后，商品分类页面则展示一、二级分类内容，是否确认关闭?";
      await this.$confirm(title, "分组展示提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          ONLYSHOWONE({ isshowtwo: isshowtwo ? 1 : 0 }).then(
            ({ code, msg }) => {
              this.$message({
                message: msg,
                type: code === 200 ? "success" : "error"
              });
              if (code === 200) {
                this.getList();
              }
            }
          );
        })
        .catch(() => {
          this.isshowtwo = !isshowtwo;
        });
    },
    async switchShow() {
      await SHOWAPPONE().then(res => {
        let { data } = res;
        this.isshowtwo = data === 1 ? true : 0;
      });
    },
    async save() {
      await SETSHOPGOODSTYPE({
        parent_id: this.parent_id,
        type_cover: this.addForm.commodityImage,
        type_name: this.addForm.dataItemName,
        type_id: this.type_id
      }).then(({ code, msg }) => {
        if (code === 200) {
          this.dialogFormVisible = false;
          this.getList();
        }
        this.$message({
          message: msg,
          type: code === 200 ? "success" : "error"
        });
      });
    },
    async remove(typeId) {
      await this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        DELETE({ type_id: typeId }).then(({ code, msg }) => {
          if (code === 200) {
            this.dialogFormVisible = false;
            this.getList();
          }
          this.$message({
            message: msg,
            type: code === 200 ? "success" : "error"
          });
        });
      });
    },
    async getList() {
      await GETLISTShopClass().then(({ code, data, msg }) => {
        if (code === 200) {
          this.ListData = data;
        } else {
          this.ListData = [];
          this.$message.error(msg);
        }
      });
    },
    renderContent(h, { data }) {
      if (data.pid === 0) {
        return (
          <div class="custom-tree-node">
            <div class="flexBox">
              <div class="ItemBox" style="padding-left:30px;">
                {<img src={this.Url + data.type_cover} class="cover" />}
                {data.type_name}
              </div>
              <div class="ItemBox">已有商品总数量 {data.goods_nums} 个</div>
              <div class="ItemBoxs" style="width:160px;">
                <el-button
                  size="mini"
                  type="text"
                  on-click={() => this.addClass(data.type_id)}
                >
                  新建二级分类
                </el-button>
              </div>
              <div class="ItemBoxs">
                <el-button
                  size="mini"
                  type="text"
                  on-click={() => this.setClass(data, 1)}
                >
                  修改
                </el-button>
              </div>

              <div class="ItemBoxs" style=" ">
                <el-button
                  size="mini"
                  type="text"
                  on-click={() => this.remove(data.type_id, data.config_id)}
                >
                  删除
                </el-button>
              </div>
            </div>
          </div>
        );
      } else {
        return (
          <div class="custom-tree-node">
            <div class="flexBox">
              <div class="ItemBox" style="text-align: left; margin-left: 60px;">
                {<img src={this.Url + data.type_cover} class="cover" />}
                {data.type_name}
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              </div>
              <div class="ItemBox" style="margin-left: -188px;">
                已有商品数量 {data.goods_num} 个
              </div>
              <div class="ItemBoxs" style="">
                <el-button
                  size="mini"
                  type="text"
                  on-click={() => this.setClass(data, 2)}
                >
                  修改
                </el-button>
              </div>
              <div class="ItemBoxs" style=" ">
                <el-button
                  size="mini"
                  type="text"
                  on-click={() => this.remove(data.type_id, data.config_id)}
                >
                  删除
                </el-button>
              </div>
            </div>
          </div>
        );
      }
    },
    isExpands() {},
    filters() {}
  }
};
</script>
<style lang="scss">
.commodityImage {
  .icon {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    display: block;
    float: left;
    margin-right: 20px;
    overflow: hidden;
    border: 1px solid #f2f2f6;
    img {
      width: 40px;
      height: 40px;
    }
  }
  input {
    float: left;
  }
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

.custom-tree-node {
  width: 100%;
  background: #fff;
}
.el-tree-node__content {
  height: 62px !important;
  line-height: 60px;
}
.flexBox {
  display: flex;
  width: 100%;

  .ItemBox {
    flex: 1;
    border-bottom: 1px solid #f2f2f6;
  }
  .ItemBoxs {
    width: 80px;
    border-bottom: 1px solid #f2f2f6;
  }
  .ItemBox:first-child {
    text-align: left;
  }
}

.el-tree-node__content {
  position: relative;
  padding-left: 0px !important;
}
.el-tree-node__expand-icon.expanded {
  position: absolute;
}
.el-tree-node__content > .el-tree-node__expand-icon {
  position: absolute;
}

img.cover {
  width: 30px;
  height: 30px;
  display: block !important;
  float: left;
  margin: 15px 20px 0 0;
  border: 1px solid #f2f2f6;
  border-radius: 6px;
}
</style>
<style>
.list-container > .el-tree > .el-tree-node {
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 20px;
  box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
}
</style>
